/**
 * 海洋数据统计分析系统工具类库
 * 提供表格处理、图表生成和数据格式化功能
 */

/**
 * 表格工具类 - 处理表格数据的分页和格式化
 */
class TableUtils {
    /**
     * 构造函数
     * @param {Object} options - 配置项
     * @param {Array} options.data - 原始数据
     * @param {number} options.pageSize - 每页大小
     * @param {Function} options.formatter - 数据格式化函数
     */
    constructor(options = {}) {
        this.rawData = options.data || [];
        this.pageSize = options.pageSize || 3;
        this.currentPage = 1;
        this.formatter = options.formatter || this.defaultFormatter;
    }

    /**
     * 默认格式化函数
     * @param {Array} data - 原始数据
     * @param {Object} context - 上下文信息
     * @returns {Array} 格式化后的表格数据
     */
    defaultFormatter(data, context = {}) {
        return data.map((item, index) => ({
            index: index + 1,
            ...item
        }));
    }

    /**
     * 设置数据
     * @param {Array} data - 原始数据
     */
    setData(data) {
        this.rawData = data;
        this.currentPage = 1; // 重置到第一页
    }

    /**
     * 获取分页后的数据
     * @returns {Array} 分页后的数据
     */
    getPaginatedData() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.rawData.slice(start, end);
    }

    /**
     * 切换页码
     * @param {number} page - 页码
     */
    changePage(page) {
        this.currentPage = page;
    }

    /**
     * 获取总页数
     * @returns {number} 总页数
     */
    getTotalPages() {
        return Math.ceil(this.rawData.length / this.pageSize);
    }
}

/**
 * 图表工具类 - 封装ECharts图表的创建、更新和销毁
 */

/**
 * 箱线图调用示例（包含样例数据）
 * 
 * // 示例1: 单系列数据，直接传入统计值
 * const chart1 = new ChartUtils('chart-container-1');
 * const singleSeriesData = {
 *   timeData: ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05'], // 时间轴数据
 *   seriesData: [15.2, 16.7, 17.5, 18.2, 19.1], // 原始数据（保持接口一致性）
 *   stats: { // 自定义统计值
 *     min: 15.2,      // 最小值
 *     q1: 16.0,       // 第一四分位数
 *     median: 17.5,   // 中位数
 *     q3: 18.6,       // 第三四分位数
 *     max: 19.1       // 最大值
 *   }
 * };
 * chart1.updateChart(singleSeriesData, {
 *   chartType: 'candlestick',
 *   title: '东海海温分布箱线图',
 *   area: '东海',
 *   indexLabel: '温度(°C)'
 * });
 * 
 * // 示例2: 多系列数据，每个系列传入统计值
 * const chart2 = new ChartUtils('chart-container-2');
 * const multiSeriesData = {
 *   timeData: ['2023-Q1', '2023-Q2', '2023-Q3', '2023-Q4'], // 时间轴数据
 *   seriesData: [
 *     { name: '东海', data: [15.2, 16.7, 17.5, 18.2, 19.1, 17.8, 16.5, 15.9] },
 *     { name: '南海', data: [22.3, 23.5, 24.2, 25.1, 24.7, 23.8, 22.9, 22.1] },
 *     { name: '黄海', data: [12.1, 13.5, 14.8, 16.2, 15.5, 14.2, 13.1, 12.5] }
 *   ],
 *   stats: { // 每个系列的统计值
 *     '东海': { min: 15.2, q1: 16.2, median: 17.15, q3: 18.0, max: 19.1 },
 *     '南海': { min: 22.1, q1: 22.6, median: 23.65, q3: 24.85, max: 25.1 },
 *     '黄海': { min: 12.1, q1: 12.8, median: 13.85, q3: 15.1, max: 16.2 }
 *   }
 * };
 * chart2.updateChart(multiSeriesData, {
 *   chartType: 'candlestick',
 *   title: '多海区海温分布对比箱线图',
 *   indexLabel: '温度(°C)'
 * });
 * 
 * // 示例3: 通过configParams传递统计值（可选方式）
 * const chart3 = new ChartUtils('chart-container-3');
 * chart3.updateChart(
 *   {
 *     timeData: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
 *     seriesData: [5.2, 6.1, 7.5, 8.7, 10.2, 11.5]
 *   },
 *   {
 *     chartType: 'candlestick',
 *     title: '月度平均气温箱线图',
 *     area: '渤海',
 *     indexLabel: '气温(°C)',
 *     stats: { // 在configParams中传递统计值
 *       min: 5.2,
 *       q1: 6.4,
 *       median: 8.1,
 *       q3: 10.0,
 *       max: 11.5
 *     }
 *   }
 * );
 */
class ChartUtils {
    /**
     * 构造函数
     * @param {string} containerId - 图表容器ID
     * @param {Object} options - 配置项
     * @param {string} options.chartType - 图表类型(line/candlestick/scatter)
     * @param {boolean} options.responsive - 是否响应式
     */
    constructor(containerId, options = {}) {
        this.containerId = containerId;
        this.chartInstance = null;
        this.chartType = options.chartType || 'line';
        this.responsive = options.responsive !== undefined ? options.responsive : true;
        this.init();
    }

    /**
     * 初始化图表实例
     */
    init() {
        const container = document.getElementById(this.containerId);
        if (!container) {
            console.error(`图表容器 #${this.containerId} 不存在`);
            return;
        }
        
        this.chartInstance = echarts.init(container);
        
        // 设置响应式
        if (this.responsive) {
            window.addEventListener('resize', () => {
                this.resize();
            });
        }
    }

    /**
     * 调整图表大小
     */
    resize() {
        if (this.chartInstance) {
            this.chartInstance.resize();
        }
    }

    /**
     * 更新图表
     * @param {Object} dataParams - 数据参数
     *   @param {Array} dataParams.timeData - 时间轴数据
     *   @param {Array} dataParams.seriesData - 系列数据
     * @param {Object} configParams - 配置项
     *   @param {string} configParams.chartType - 图表类型
     *   @param {string} configParams.title - 图表标题
     *   @param {string} configParams.area - 海区名称
     *   @param {string} configParams.indexLabel - 指标标签
     *   @param {Object} dataParams.stats - 自定义统计值 {min, q1, median, q3, max} 或 {系列名称: {min, q1, median, q3, max}}
     *   @param {Object} configParams.stats - 自定义统计值（同上）
     */
    updateChart(dataParams, configParams) {
        // 检查图表实例是否存在且容器元素是否有效
        if (!this.chartInstance || !dataParams || !dataParams.timeData || !dataParams.seriesData) {
            console.error('图表实例或数据参数缺失');
            return;
        }
        
        // 确保容器DOM元素仍然存在
        if (!this.containerId || !document.getElementById(this.containerId)) {
            console.error('图表容器元素不存在或已被移除');
            return;
        }

        const { timeData, seriesData } = dataParams;
        const { chartType, title, area, indexLabel } = configParams || {};

        // 更新图表类型
        this.chartType = chartType || this.chartType || 'line';

        let option = {};
        // 根据图表类型生成配置
        switch (this.chartType) {
            case 'line':
                option = this.getLineChartOption(timeData, seriesData, title, area, indexLabel);
                break;
            case 'candlestick':
                // 从dataParams或configParams中获取stats参数
                const stats = dataParams.stats || configParams.stats;
                option = this.getCandlestickChartOption(timeData, seriesData, title, area, indexLabel, stats);
                break;
            case 'scatter':
                // 散点图已禁用，使用折线图替代
                option = this.getLineChartOption(timeData, seriesData, title, area, indexLabel);
                break;
            default:
                option = this.getLineChartOption(timeData, seriesData, title, area, indexLabel);
        }

        // 设置图表配置，使用true强制替换所有配置
        this.chartInstance.setOption(option, true);
    }

    /**
     * 获取折线图配置
     * @param {Array} timeData - 时间数据
     * @param {Array|Array} seriesData - 系列数据，可以是单个数组或多系列对象数组
     * @param {string} title - 图表标题
     * @param {string|Array} area - 海区名称，支持单个或多个
     * @param {string} indexLabel - 指标标签
     * @returns {Object} ECharts配置对象
     */
    getLineChartOption(timeData, seriesData, title, area, indexLabel) {
        // 处理多系列数据
        let seriesConfig = [];
        
        if (Array.isArray(seriesData) && seriesData.length > 0) {
            if (Array.isArray(seriesData[0]) || typeof seriesData[0] !== 'object') {
                // 单系列数据格式
                seriesConfig = [{
                    name: Array.isArray(area) ? (area.length > 0 ? area[0] : '数据') : area,
                    data: seriesData,
                    type: 'line',
                    smooth: true,
                    showSymbol: true,
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                        color: '#1890ff',
                        width: 4,
                        shadowColor: 'rgba(24, 144, 255, 0.5)',
                        shadowBlur: 10,
                        shadowOffsetY: 3
                    },
                    itemStyle: {
                        color: '#fff',
                        borderColor: '#1890ff',
                        borderWidth: 3,
                        shadowColor: 'rgba(24, 144, 255, 0.5)',
                        shadowBlur: 5
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(24, 144, 255, 0.3)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(24, 144, 255, 0.05)'
                            }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                            color: '#fff',
                            borderColor: '#40a9ff',
                            borderWidth: 4
                        },
                        focus: 'series'
                    }
                }];
            } else {
                // 多系列数据格式 - 为每个系列设置不同的颜色
                const colors = ['#1890ff', '#52c41a', '#faad14', '#ff4d4f', '#722ed1'];
                seriesConfig = seriesData.map((item, index) => ({
                    name: item.name || (Array.isArray(area) ? area[index] : area),
                    data: item.data || item,
                    type: 'line',
                    smooth: true,
                    showSymbol: true,
                    symbol: 'circle',
                    symbolSize: 8,
                    lineStyle: {
                        color: colors[index % colors.length],
                        width: 4,
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 10,
                        shadowOffsetY: 3
                    },
                    itemStyle: {
                        color: '#fff',
                        borderColor: colors[index % colors.length],
                        borderWidth: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 5
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: colors[index % colors.length] + '30'
                            },
                            {
                                offset: 1,
                                color: colors[index % colors.length] + '0A'
                            }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                            color: '#fff',
                            borderColor: colors[index % colors.length],
                            borderWidth: 4
                        },
                        focus: 'series'
                    }
                }));
            }
        }

        return {
            title: {
                text: title || (Array.isArray(area) ? area.join('、') : area) + ' - ' + indexLabel + '变化折线图',
                left: 'center',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                },
                backgroundColor: 'rgba(255, 255, 255, 0.95)',
                borderColor: '#ddd',
                borderWidth: 1,
                textStyle: {
                    color: '#333'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timeData,
                axisLabel: {
                    interval: 0,
                    color: '#666',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#666',
                    fontSize: 12
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#f0f0f0',
                        type: 'dashed'
                    }
                }
            },
            legend: {
                data: seriesConfig.map(item => item.name),
                top: 30,
                textStyle: {
                    fontSize: 12,
                    color: '#666'
                }
            },
            series: seriesConfig
        };
    }

    /**
     * 获取箱线图配置选项
     * @param {Array} timeData - 时间数据数组
     * @param {Array} seriesData - 系列数据数组
     * @param {string} title - 图表标题
     * @param {Array} area - 海区信息
     * @param {string} indexLabel - 指标标签
     * @param {Object|Array} stats - 统计值对象 {min, q1, median, q3, max} 或统计值数组，每个元素对应一个时间点
     * @returns {Object} ECharts配置对象
     */
    getCandlestickChartOption(timeData, seriesData, title, area, indexLabel, stats = null) {
        // 定义不同系列的颜色
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
        
        // 创建多个箱线图系列，为每个选中的海区单独创建数据
        const seriesConfig = [];
        
        // 如果seriesData是数组且包含name和data属性，则为每个系列单独处理
        if (Array.isArray(seriesData) && seriesData.length > 0 && seriesData[0].name !== undefined) {
            seriesData.forEach((series, index) => {
                // 从参数获取统计值，如果没有传入则内部计算
                let min, q1, median, q3, max;
                let boxplotData; // 声明箱线图数据变量
                
                if (stats && stats[series.name]) {
                    // 使用传入的统计值
                    min = stats[series.name].min;
                    q1 = stats[series.name].q1;
                    median = stats[series.name].median;
                    q3 = stats[series.name].q3;
                    max = stats[series.name].max;
                    
                    // 为每个时间点创建箱线图数据
                    boxplotData = Array.isArray(stats[series.name].min) ? 
                        // 如果是多时间点统计值数组
                        timeData.map((_, idx) => [
                            stats[series.name].min[idx],
                            stats[series.name].q1[idx],
                            stats[series.name].median[idx],
                            stats[series.name].q3[idx],
                            stats[series.name].max[idx]
                        ]) : 
                        // 单个统计值应用于所有时间点
                        timeData.map(() => [min, q1, median, q3, max]);
                } else {
                    // 对当前系列数据进行排序
                    const sortedData = [...series.data].sort((a, b) => a - b);
                    const n = sortedData.length;
                    
                    if (n > 0) {
                        // 计算统计值
                        min = sortedData[0];
                        max = sortedData[n - 1];
                        median = n % 2 === 0 ? (sortedData[n/2 - 1] + sortedData[n/2]) / 2 : sortedData[Math.floor(n/2)];
                        const q1Index = Math.floor(n * 0.25);
                        const q3Index = Math.floor(n * 0.75);
                        q1 = sortedData[q1Index];
                        q3 = sortedData[q3Index];
                    } else {
                        // 空数据处理
                        min = q1 = median = q3 = max = 0;
                    }
                    
                    // 为每个时间点创建箱线图数据
                    boxplotData = timeData.map(() => [min, q1, median, q3, max]);
                }
                
                // 创建系列配置
                seriesConfig.push({
                    name: series.name,
                    type: 'boxplot',
                    data: boxplotData,
                    itemStyle: {
                        color: colors[index % colors.length],
                        borderColor: colors[index % colors.length]
                    },
                    emphasis: {
                        itemStyle: {
                            color: '#91cc75'
                        }
                    }
                });
            });
        } else {
            // 兼容旧格式，处理单一数据系列
            let min, q1, median, q3, max;
            let boxplotData; // 声明箱线图数据变量
            
            if (stats && !stats.name) {
                // 使用传入的统计值
                min = stats.min;
                q1 = stats.q1;
                median = stats.median;
                q3 = stats.q3;
                max = stats.max;
                
                // 为每个时间点创建箱线图数据
                boxplotData = Array.isArray(stats) ? 
                    // 如果stats是数组，每个元素对应一个时间点的统计值
                    timeData.map((_, idx) => {
                        const timeStats = stats[idx] || {};
                        return [
                            timeStats.min !== undefined ? timeStats.min : 0,
                            timeStats.q1 !== undefined ? timeStats.q1 : 0,
                            timeStats.median !== undefined ? timeStats.median : 0,
                            timeStats.q3 !== undefined ? timeStats.q3 : 0,
                            timeStats.max !== undefined ? timeStats.max : 0
                        ];
                    }) : 
                    // 如果stats是对象，检查min是否为数组（多时间点统计值）
                    Array.isArray(stats.min) ? 
                        timeData.map((_, idx) => [
                            stats.min[idx] || 0,
                            stats.q1[idx] || 0,
                            stats.median[idx] || 0,
                            stats.q3[idx] || 0,
                            stats.max[idx] || 0
                        ]) : 
                        // 单个统计值应用于所有时间点
                        timeData.map(() => [min, q1, median, q3, max]);
            } else {
                const sortedData = [...seriesData].sort((a, b) => a - b);
                const n = sortedData.length;
                
                if (n > 0) {
                    // 计算统计值
                    min = sortedData[0];
                    max = sortedData[n - 1];
                    median = n % 2 === 0 ? (sortedData[n/2 - 1] + sortedData[n/2]) / 2 : sortedData[Math.floor(n/2)];
                    const q1Index = Math.floor(n * 0.25);
                    const q3Index = Math.floor(n * 0.75);
                    q1 = sortedData[q1Index];
                    q3 = sortedData[q3Index];
                } else {
                    // 空数据处理
                    min = q1 = median = q3 = max = 0;
                }
                
                // 为每个时间点创建箱线图数据
                boxplotData = timeData.map(() => [min, q1, median, q3, max]);
            }
            
            // 创建单个箱线图系列
            seriesConfig.push({
                name: Array.isArray(area) ? (area.length > 0 ? area[0] : '数据') : area,
                type: 'boxplot',
                data: boxplotData,
                itemStyle: {
                    color: colors[0],
                    borderColor: colors[0]
                },
                emphasis: {
                    itemStyle: {
                        color: '#91cc75'
                    }
                }
            });
        } // 移除了多余的闭合大括号

        return {
            title: {
                text: title || (Array.isArray(area) ? area.join('、') : area) + ' - ' + indexLabel + '箱线图',
                left: 'center',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333'
                }
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: 'rgba(255, 255, 255, 0.95)',
                borderColor: '#ddd',
                borderWidth: 1,
                textStyle: {
                    color: '#333'
                },
                formatter: function(params) {
                    // 详细调试信息，帮助识别数据格式问题
                    try {
                        // 处理非数组格式的params，转换为数组格式
                        let paramsArray = params;
                        if (!Array.isArray(params)) {
                            // 尝试将非数组数据转换为数组格式
                            paramsArray = [params];
                        }
                        
                        // 如果没有数据点，显示相应信息
                        if (paramsArray.length === 0) {
                            return '无数据点可显示';
                        }
                        
                        // 遍历paramsArray数组中的所有数据点（支持多系列）
                        const results = [];
                        
                        paramsArray.forEach((item, index) => {
                            // 详细的错误检查
                            if (!item) {
                                results.push(`系列${index + 1}: 数据项不存在`);
                                return;
                            }
                            
                            // 获取系列名称和时间信息
                            const seriesName = item.seriesName || item.name || `系列${index + 1}`;
                            const time = item.name || item.name2 || '未知时间';
                            
                            // 处理数据显示
                            let dataContent = [];
                            
                            // 显示系列信息
                            dataContent.push(`<strong>${seriesName}</strong>`);
                            dataContent.push(`时间: ${time}`);
                            
                            // 详细检查数据
                            if (!item.data) {
                                dataContent.push('错误: 无数据');
                            } else if (!Array.isArray(item.data)) {
                                dataContent.push(`错误: 数据不是数组，实际类型: ${typeof item.data}`);
                                dataContent.push(`数据内容: ${JSON.stringify(item.data)}`);
                            } else if (item.data.length < 5) {
                                dataContent.push(`错误: 数据长度不足5个元素，实际长度: ${item.data.length}`);
                                dataContent.push(`数据内容: ${JSON.stringify(item.data)}`);
                            } else {
                                // 正确格式的数据，显示统计值
                                const data = item.data;
                                dataContent.push('最小值: ' + (typeof data[0] === 'number' ? data[0].toFixed(3) : `N/A (类型: ${typeof data[0]})`));
                                dataContent.push('Q1: ' + (typeof data[1] === 'number' ? data[1].toFixed(3) : `N/A (类型: ${typeof data[1]})`));
                                dataContent.push('中位数: ' + (typeof data[2] === 'number' ? data[2].toFixed(3) : `N/A (类型: ${typeof data[2]})`));
                                dataContent.push('Q3: ' + (typeof data[3] === 'number' ? data[3].toFixed(3) : `N/A (类型: ${typeof data[3]})`));
                                dataContent.push('最大值: ' + (typeof data[4] === 'number' ? data[4].toFixed(3) : `N/A (类型: ${typeof data[4]})`));
                            }
                            
                            results.push(dataContent.join('<br/>'));
                        });
                        
                        return results.join('<br/><br/>');
                    } catch (error) {
                        // 捕获所有异常并显示错误信息
                        return `格式化错误: ${error.message}`;
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: timeData,
                axisLabel: {
                    interval: 0,
                    color: '#666',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#666',
                    fontSize: 12
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#f0f0f0',
                        type: 'dashed'
                    }
                }
            },
            legend: {
                data: seriesConfig.map(item => item.name),
                top: 30,
                textStyle: {
                    fontSize: 12,
                    color: '#666'
                }
            },
            series: seriesConfig
        };
    }

    /**
     * 获取散点图配置 - 已注释（修复了未定义变量问题）
     * @param {Array} timeData - 时间数据
     * @param {Array} seriesData - 系列数据
     * @param {string} title - 图表标题
     * @param {string} area - 海区名称
     * @param {string} indexLabel - 指标标签
     * @returns {Object} ECharts配置对象
     */
    /*
    getScatterChartOption(timeData, seriesData, title, area, indexLabel) {
        // 转换为散点数据格式 [[索引, 值], ...]
        const scatterData = seriesData.map((val, index) => [index, val]);
        
        // 根据数值大小设置不同的颜色分组
        const colorRanges = seriesData.map(val => {
            const absVal = Math.abs(val);
            if (absVal < 0.2) return '#52c41a'; // 绿色
            if (absVal < 0.3) return '#1890ff'; // 蓝色
            if (absVal < 0.4) return '#faad14'; // 橙色
            return '#ff4d4f'; // 红色
        });

        // 定义散点图系列配置（修复未定义变量问题）
        const seriesConfig = [{
            name: Array.isArray(area) ? (area.length > 0 ? area[0] : '数据') : area,
            type: 'scatter',
            data: scatterData,
            itemStyle: {
                color: function(params) {
                    return colorRanges[params.dataIndex];
                },
                symbolSize: 10,
                shadowBlur: 5
            }
        }];

        return {
            title: {
                text: title || (area + ' - ' + indexLabel + '散点图'),
                left: 'center',
                textStyle: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333'
                }
            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(255, 255, 255, 0.95)',
                borderColor: '#ddd',
                borderWidth: 1,
                textStyle: {
                    color: '#333'
                },
                formatter: (params) => {
                    const index = params.value[0];
                    return '<strong>' + timeData[index] + ': ' + '</strong>' + 
                           params.value[1].toFixed(3);
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: timeData,
                axisLabel: {
                    interval: 0,
                    color: '#666',
                    fontSize: 12
                },
                axisLine: {
                    lineStyle: {
                        color: '#e8e8e8'
                    }
                },
                axisTick: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    color: '#666',
                    fontSize: 12
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#f0f0f0',
                        type: 'dashed'
                    }
                }
            },
            legend: {
                data: seriesConfig.map(item => item.name),
                top: 30,
                textStyle: {
                    fontSize: 12,
                    color: '#666'
                }
            },
            series: seriesConfig
        };
    }
    */

    /**
     * 销毁图表实例
     */
    destroy() {
        if (this.chartInstance) {
            this.chartInstance.dispose();
            this.chartInstance = null;
        }
    }
}

/**
 * 数据格式化工具类 - 提供数据转换和格式化功能
 */
class DataFormatter {
    /**
     * 格式化表格数据
     * @param {Array} timeData - 时间数据
     * @param {Array} valueData - 数值数据
     * @param {string} area - 海区
     * @param {string} description - 描述
     * @returns {Array} 格式化后的表格数据
     */
    static formatTableData(timeData, valueData, area, description) {
        return timeData.map((time, index) => ({
            time: time,
            value: valueData[index],
            area: area,
            description: description
        }));
    }

    /**
     * 获取指标标签
     * @param {Array} indexOptions - 指标选项
     * @param {string} indexValue - 指标值
     * @returns {string} 指标标签
     */
    static getIndexLabel(indexOptions, indexValue) {
        const option = indexOptions.find(item => item.value === indexValue);
        return option ? option.label : '数值';
    }
}